import React, { Component, Fragment } from 'react';
import { Document, Page } from 'react-pdf';
import { Pagination } from 'antd'
 
import styles from './Preview.less'
 
class Preview extends Component{
  state={
    pdfBase64:null,
    numPages:0,
    pageNumber:1
  }
 
  componentDidMount(){
    window.addEventListener('message', (event) => {
      this.setState({pdfBase64:event.data})
    }, false)
  }
 
  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }
 
  onChangePage=(page)=>{
    this.setState({ pageNumber:page });
  }
 
  render(){
    const {pdfBase64,numPages,pageNumber} = this.state
    return(
      <Fragment>
        <Document
          className={styles.preview}
          onLoadSuccess={this.onDocumentLoad}
          file={pdfBase64}
          renderMode='svg'
        >
          <Page className={styles.page} pageNumber={pageNumber} scale={1.5} />
        </Document>
        <Pagination
          className={styles.pagination}
          total={numPages}
          showTotal={total => `共 ${total} 页`}
          current={pageNumber}
          pageSize={1}
          size='small'
          onChange={this.onChangePage}
        />
      </Fragment>
    )
  }
 
}
 
export default Preview
